<template>
  <el-card class="evaluate-container" shadow="never">
    <!-- 一个开关，控制是否显示不允许评价课程，默认是不显示的 -->
    <label for="aaa">显示不允许评价课程&nbsp;</label>
    <el-switch v-model="isShow"> </el-switch>
    <!-- 课程列表 -->
    <el-row :gutter="20">
      <el-col v-for="item in courseShow" :key="item.course_id" :span="6">
        <courser-box :course="item" @click.native="onClick(item)"></courser-box>
      </el-col>
    </el-row>

    <!-- 边缘栏 -->
    <el-drawer :visible.sync="drawer" :withHeader="false">
      <el-form
        style="padding: 10px"
        label-position="left"
        :model="form"
        label-width="180px"
      >
        <el-form-item
          v-for="item in formTemplate"
          :key="item.bindKey"
          :label="item.label"
        >
          <!-- <el-slider v-model="form.difficulty"></el-slider> -->
          <!-- <el-input v-model.number="form.difficulty"></el-input> -->
          <el-input-number
            v-model="form[item.bindKey]"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="其他">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="其他意见或建议"
            v-model="form.other"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="submit" type="primary">确 定</el-button>
        <el-button @click="close" type="danger">关 闭</el-button>
      </div>
    </el-drawer>
  </el-card>
</template>

<script>
import CourserBox from "@/components/CourserBox.vue";
import PopupSidebar from "@/components/PopupSidebar.vue";
import Question from "@/components/Question.vue";
// import user from "@/store/user";
import { getEvaluateCourse, uploadReviews } from "@/services/student";
import { Message } from "element-ui";
export default {
  name: "Evaluate",
  components: { CourserBox, PopupSidebar, Question },
  data() {
    return {
      course: [],
      // clickItem: {},
      drawer: false,
      form: {},
      currentCourseID: "",
      isShow: false,
      isWritableCourse: [],
      formTemplate: [
        { label: "教材难易度评分", bindKey: "difficulty" },
        { label: "教材完善度评分", bindKey: "perfection" },
        { label: "课程安排合理性评分", bindKey: "rationality" },
        { label: "课程安排均衡性评分", bindKey: "equilibrium" },
        { label: "课程安排整体性评分", bindKey: "entirety" },
        { label: "教学环境评分", bindKey: "environment" },
        { label: "教学设备评分", bindKey: "equipment" },
        { label: "教学设备使用率", bindKey: "utilization_rate" },
        { label: "教学设备出错率", bindKey: "fault_rate" },
      ],
    };
  },
  methods: {
    close() {
      this.drawer = false;
      this.form = {};
    },
    onClick(course) {
      this.currentCourseID = course.course_id;
      if (course.isWritable) {
        this.drawer = true;
      } else {
        alert("您当前被禁止评价该课程");
      }
    },
    submit() {
      uploadReviews(this.student_id, this.currentCourseID, this.form).then(
        (res) => {
          // if (res.data.code == 200) {
          if (true) {
            Message.success("评价成功");
            const course_id = this.currentCourseID;
            this.course = this.course.filter((v) => v.course_id != course_id);
          }
        }
      );
    },
  },
  computed: {
    courseShow() {
      return this.isShow ? this.course : this.isWritableCourse;
    },
  },
  created() {
    // const { student_id } = user;
    this.student_id = JSON.parse(localStorage.getItem("userInfo")).student_id;
    getEvaluateCourse(this.student_id).then((res) => {
      this.course = res.data.data;
      this.isWritableCourse = this.course.filter((v) => v.isWritable);
    });
  },
};
</script>

<style lang='less' scoped>
.evaluate-container {
  height: 100%;
  // .el-row {
  //   height: 100%;
  //   overflow: auto;
  //   padding-bottom: 30px;
  // }
}
.el-card :deep(.el-card__body) {
  height: 100%;
}
.el-col:nth-child(n + 5) {
  margin-top: 20px;
}
// .el-drawer {
//   display: flex;
//   flex-direction: column;
//   justify-content: flex-start;
//   align-items: flex-start;
//   padding: 20px;
//   line-height: 0;
// }
.footer {
  width: 100%;
  height: 50px;
  // position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  bottom: 0;
}
</style>